<template>
  <div id="app">
    <!-- 路由出口 -->
    <router-view @update-activity-info="handleConfigUpdate" />

    <!-- 底部TabBar导航组件 -->
    <TabBar :config="tabBarConfig" />
  </div>
</template>

<script src="../src/utils/flexible.js"></script>
<script>
import TabBar from "./components/TabBar.vue";

export default {
  components: {
    TabBar,
  },
  data() {
    return {
      tabBarConfig: {}, // 存储从home组件接收的配置
      activeInfo: {},
    };
  },
  methods: {
    handleConfigUpdate(payload) {
      this.tabBarConfig = payload.currentConfig;
      this.activeInfo = payload.activityInfo;
      
      // 1. 设置标题并同步到localStorage
      const pageTitle = this.activeInfo?.name || "默认活动标题";
      document.title = pageTitle;
      localStorage.setItem("pageTitle", pageTitle); // 存入本地存储
      
      console.log("活动名称:", pageTitle);
      console.log("App.vue接收到底部导航配置:", payload.currentConfig);
    },
  },
  mounted() {
    // 2. 页面初始化时从localStorage恢复标题
    const storedTitle = localStorage.getItem("pageTitle");
    if (storedTitle) {
      document.title = storedTitle; // 恢复标题
    }
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 80px;
}

body {
  min-width: 320px;
  margin: 0 auto;
  line-height: 1.5;
}
.bigBox {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

#app {
  min-height: 100vh;
  position: relative;
}
.bigBox > :first-child {
  flex: 1;
  overflow: auto;
}
@media screen and (min-width: 480px) {
  html {
    font-size: 100% !important;
  }
}
</style>
